<template>
  <div
    class="tool-complex tool-image"
    :style="{
      borderColor: attr.borderColor,
      borderWidth: `${attr.borderWidth}px`,
    }"
  >
    <img
      :src="attr.url"
      @error="setDefaultImage"
      width="100%"
      height="100%"
      draggable="false"
    />
  </div>
</template>

<script>
import defaultImage from "@/assets/images/加载失败.png";
import mixins from "../mixin";
export default {
  name: "tool-image",
  mixins: [mixins],
  data() {
    return {
      attr: null,
    };
  },
  methods: {
    setDefaultImage(e) {
      console.log(e);
      e.target.src = defaultImage;
    },
  },
  pageData: {
    version: "0.0.1",
    name: "tool-image",
    title: "图片",
    count: 0,
    width: 300,
    height: 150,
    config: {
      label: "图片",
      tpye: "API", // '"table" "url"
      active: [],
      attr: [
        // {
        //   key: "src", // 属性
        //   title: "图片地址", // 属性名
        //   formType: "text-string", // 属性组件
        //   group: "basics", // 属性分类 store=>design=>group
        //   type: "String", // 属性值类型
        //   data: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg", // 属性值
        // },
        {
          key: "url",
          title: "选择图片",
          formType: "image-select",
          group: "basics",
          type: "String",
          data: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
        },
        {
          key: "borderWidth",
          title: "边框大小",
          hidden: false,
          formType: "text-number",
          group: "basics",
          type: "String",
          data: 2,
        },
        {
          key: "borderColor",
          title: "边框颜色",
          formType: "text-string",
          group: "basics",
          type: "String",
          data: "#ddd",
        },
      ],
    },
  },
};
</script>

<style scoped>
.tool-complex {
  width: 100%;
  height: 100%;
  transition: all 0.58s;
}
.tool-image {
  border: 1px solid #ddd;
}
</style>
